.login {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/images/login-bg.png');
  background-size: cover;
  background-position: center;
  position: relative;
  &-con{
      position: absolute;
      right: 160px;
      top: 50%;
      /*transform: translateY(-50%);*/
      right: 160px;
      top: 30%;
      width: 320px;
      &-header{
          font-size: 16px;
          font-weight: 300;
          text-align: center;
          padding: 30px 0;
      }
      .form-con{
          padding: 10px 0 0;
      }
      .login-tip{
          font-size: 14px;
          text-align: center;
          color: #999;
      }
      .login-icon {
          width:20px;
          vertical-align: text-top;
          margin-right: 5px;
      }        
  }

  .log-bg {
    background: #fff;
    width: 320px;
    height: 100%;
    position: absolute;
    top: 0px;
    opacity: 0.7;
  }

  .ivu-card {
    background:transparent;
  }

  .login-input {
    input {
      border-radius: 30px;
    }
  }

  .login-checkbox {
    margin-left:20px;
    color:#999;
  }

  .button-shadow {
    border-radius: 40px;
    /*box-shadow: 0px 15px 60px 0px #5158d4;*/
  }

  .logo {
    width: 90px;
    height: 90px;
    left: 100px;
    top: 30px;
    position: absolute;
    background-image: url("../../assets/images/left-logo.png");
    background-size: cover;
    background-position: center;
    position: relative;
    animation: ud infinite 2500ms ease-in-out;
  }

  .login-foot {
    position: absolute;
    bottom: 10px;
    font-size: 14px;
    width: 100%;
    text-align: center;
    color: #999;
  }

  .form-title {
    font-size:22px;
    color:#4e51c5;
    text-align:center;
    height: 50px;
    line-height: 50px;
  }

  .float-on-bg {
    position: absolute;
    background-size: cover;
    background-position: center;
    background-image: url("../../assets/images/bg-float.png");
    animation: bg infinite 2500ms ease-in-out;
    width: 991px;
    height: 669px;
    top: 135px;
    left: 100px;
    margin: auto;
  }

  .float-icona {
    width: 41px;
    height: 24px;
    left: 610px;
    top: 170px;
    position: absolute;
    background-image: url("../../assets/images/icona.png");
    background-size: cover;
    background-position: center;
    animation: ud infinite 3000ms ease-in-out;
  }

  .float-iconb {
    width: 22px;
    height: 24px;
    left: 300px;
    top: 330px;
    position: absolute;
    background-image: url("../../assets/images/iconb.png");
    background-size: cover;
    background-position: center;
    animation: ud infinite 2500ms ease-in-out;
  }

  .float-iconc {
    width: 22px;
    height: 24px;
    left: 340px;
    top: 360px;
    position: absolute;
    background-image: url("../../assets/images/iconc.png");
    background-size: cover;
    background-position: center;
    animation: ud infinite 2800ms ease-in-out;
  }

  .float-icond {
    width: 22px;
    height: 24px;
    left: 382px;
    top: 385px;
    position: absolute;
    background-image: url("../../assets/images/icond.png");
    background-size: cover;
    background-position: center;
    animation: ud infinite 2600ms ease-in-out;
  }

  /*上下浮动*/
  @keyframes ud {
    0% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(0, 4px, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  /*上下浮动*/
  @keyframes bd {
    0% {
      transform: translate3d(0, 0, 0);
    }
    50% {
      transform: translate3d(0, 2px, 0);
    }
    100% {
      transform: translate3d(0, 0, 0);
    }
  }

  /*小图标*/
  @keyframes icona {
    0% {
      transform: rotateY(0deg);
      top: 130px;
      opacity: 0;
    }
    50% {
      transform: rotateY(360deg);
      top: 90px;
      opacity: 1;
    }
    60% {
      transform: rotateY(360deg);
      top: 90px;
      opacity: 1;
    }
    100% {
      transform: rotateY(0deg);
      top: 50px;
      opacity: 0;
    }
  }
  @keyframes iconb {
    0% {
      transform: rotateY(0deg);
      top: 240px;
      opacity: 0;
    }
    50% {
      transform: rotateY(360deg);
      top: 200px;
      opacity: 1;
    }
    60% {
      transform: rotateY(360deg);
      top: 200px;
      opacity: 1;
    }
    100% {
      transform: rotateY(0deg);
      top: 160px;
      opacity: 0;
    }
  }
  @keyframes iconc {
    0% {
      transform: rotateY(0deg);
      top: 300px;
      opacity: 0;
    }
    50% {
      transform: rotateY(360deg);
      top: 260px;
      opacity: 1;
    }
    60% {
      transform: rotateY(360deg);
      top: 260px;
      opacity: 1;
    }
    100% {
      transform: rotateY(0deg);
      top: 220px;
      opacity: 0;
    }
  }
  //旋转
  @keyframes icon {
    0% {
      transform: rotateY(0deg);
    }
    50% {
      transform: rotateY(360deg);
    }
  }
}
